<template>
  <div class="box">
    <!-- 搜索栏 -->
    <van-search
      v-model="value"
      shape="round"
      placeholder="请输入搜索关键词"
      disabled
      @click="searchClick"
    />
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="#1989FA">
      <van-swipe-item v-for="item in banner" :key="item.id">
        <img v-lazy="item.image_url" alt="" width="100%" />
      </van-swipe-item>
    </van-swipe>
    <!-- 宫格 -->
    <van-grid :column-num="5">
      <van-grid-item
        :icon="item.icon_url"
        :text="item.name"
        v-for="item in channel"
        :key="item.id"
         @click="vanGridClick(item.id)"
      />
    </van-grid>
    <!-- 遮罩层 -->
    <transition name="van-fade">
      <div class="zhezhaocheng" v-show="zhezhao"></div>
    </transition>

    <!-- Popup弹框 -->
    <transition name="van-slide-right">
      <router-view />
    </transition>

    <!-- 品牌制造商直供 -->
    <BrandList :brandList="brandList"/>
    <!-- 周一周四·新品首发 -->
    <NewGoodsList :newGoodsList="newGoodsList" />
    <!-- 人气推荐 -->
    <HotGoodsList :hotGoodsList="hotGoodsList" />
    <!-- 专题精选 -->
    <TopicList :topicList="topicList" />
    <!-- 分类 -->
    <CategoryList :categoryList="categoryList" />
  </div>
</template>

<script>
import { GetHomeLists } from "../request/api";
import { mapState, mapMutations } from "vuex";
import BrandList from "../components/home/BrandList.vue";
import NewGoodsList from "../components/home/NewGoodsList.vue";
import HotGoodsList from "../components/home/HotGoodsList.vue";
import TopicList from "../components/home/TopicList.vue";
import CategoryList from "../components/home/CategoryList.vue";
export default {
  components: {
    BrandList,
    NewGoodsList,
    HotGoodsList,
    TopicList,
    CategoryList,
  },
  data() {
    return {
      value: "",
      // 数据渲染事件
      banner: [],
      channel: [],
      brandList: [],
      newGoodsList: [],
      hotGoodsList: [],
      topicList: [],
      categoryList: [],
    };
  },
  watch: {
    $route: {
      handler(newVal, oldVal) {
        if (newVal !== oldVal) {
          // 刷新当前页
          this.onshowzhezhao(false);
        }
      },
    },
  },
  created() {
    // 首页数据
    GetHomeLists().then((res) => {
      let {
        banner,
        channel,
        brandList,
        newGoodsList,
        hotGoodsList,
        topicList,
        categoryList,
      } = res.data;
      this.banner = banner;
      this.channel = channel;
      this.brandList = brandList;
      this.newGoodsList = newGoodsList;
      this.hotGoodsList = hotGoodsList;
      this.topicList = topicList;
      this.categoryList = categoryList;
    });
  },
  computed: {
    ...mapState({
      zhezhao: (state) => state.show.zhezhao,
    }),
  },
  methods: {
    ...mapMutations({
      onshowzhezhao: "show/onshowzhezhao",
    }),
    searchClick() {
      this.$router.push("/home/popup");
      this.onshowzhezhao(true);
    },
    //品牌制造商直供 跳转
    vanGridClick(id){
      this.$router.push("/channel?id="+id)
    },
  },
};
</script>
 
<style lang = "less" scoped>
.box {
  padding-bottom: 1rem;
}
img {
  display: block;
}
.zhezhaocheng {
  width: 100%;
  height: 100%;
  /* position: fixed; */
  position: absolute;
  top: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 99;
}
</style>